<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>电子钱包</p>
		</header>

		<!-- 钱包余额信息 -->
		<div class="wallet-info">
			<div class="balance-card">
				<div class="balance-header">
					<div class="wallet-icon">
						<img src="../assets/wallet-avatar.svg" alt="用户头像" @error="handleAvatarError">
						<div v-if="avatarError" class="avatar-fallback">
							<i class="fa fa-user"></i>
						</div>
					</div>
					<div class="balance-title">
						<h3>可用余额</h3>
						<p class="balance-subtitle">Available Balance</p>
					</div>
				</div>
				<div class="balance-amount-section">
					<p class="balance-amount">¥{{ walletData.balance?.toFixed(2) || '0.00' }}</p>
				</div>
			</div>

			<div class="balance-details" v-if="walletData.frozenBalance > 0 || isVipUser">
				<div class="detail-item" v-if="walletData.frozenBalance > 0">
					<div class="detail-icon frozen">
						<i class="fa fa-lock"></i>
					</div>
					<div class="detail-content">
						<span class="detail-label">冻结金额</span>
						<span class="frozen-amount">¥{{ walletData.frozenBalance?.toFixed(2) || '0.00' }}</span>
					</div>
				</div>
				<div class="detail-item" v-if="isVipUser">
					<div class="detail-icon vip">
						<i class="fa fa-star"></i>
					</div>
					<div class="detail-content">
						<span class="detail-label">透支额度</span>
						<span class="overdraft-info">
							¥1000.00
							<small>(剩余: ¥{{ remainingOverdraft.toFixed(2) }})</small>
						</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 快捷提示 -->
		<div class="quick-tips" v-if="hasUnpaidOverdraft || hasRecentFrozen">
			<div class="tip-item warning" v-if="hasUnpaidOverdraft">
				<div class="tip-icon">
					<i class="fa fa-exclamation-triangle"></i>
				</div>
				<div class="tip-content">
					<span class="tip-title">未还款提醒</span>
					<span class="tip-text">您有未还款透支金额，请及时还款</span>
				</div>
			</div>
			<div class="tip-item info" v-if="hasRecentFrozen">
				<div class="tip-icon">
					<i class="fa fa-info-circle"></i>
				</div>
				<div class="tip-content">
					<span class="tip-title">资金解冻</span>
					<span class="tip-text">近期有冻结资金即将解冻</span>
				</div>
			</div>
		</div>

		<!-- 功能入口 -->
		<div class="function-entries">
			<div class="entry-item recharge" @click="goToRecharge">
				<div class="entry-icon">
					<i class="fa fa-plus-circle"></i>
				</div>
				<span>充值</span>
			</div>
			<div class="entry-item withdraw" @click="goToWithdraw">
				<div class="entry-icon">
					<i class="fa fa-minus-circle"></i>
				</div>
				<span>提现</span>
			</div>
			<div class="entry-item transactions" @click="goToTransactions">
				<div class="entry-icon">
					<i class="fa fa-list"></i>
				</div>
				<span>交易流水</span>
			</div>
			<div class="entry-item vip-only" v-if="isVipUser">
				<div class="entry-icon">
					<i class="fa fa-star"></i>
				</div>
				<span>VIP用户</span>
				<div class="vip-badge">VIP</div>
			</div>
			<div class="entry-item upgrade-vip" v-if="!isVipUser" @click="upgradeToVip">
				<div class="entry-icon">
					<i class="fa fa-star"></i>
				</div>
				<span>升级VIP</span>
				<div class="vip-badge">免费</div>
			</div>
		</div>

		<!-- 加载状态 -->
		<div v-if="isLoading" class="loading">
			<p>加载中...</p>
		</div>

		<!-- 错误提示 -->
		<div v-if="errorMsg" class="error-msg">
			<p>{{ errorMsg }}</p>
			<button @click="loadWalletData">重试</button>
		</div>

		<!-- 底部菜单 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import axios from 'axios';

export default {
	name: 'Wallet',
	components: {
		Footer
	},
	data() {
		return {
			walletData: {
				balance: 0,
				frozenBalance: 0,
				overdraftLimit: 0,
				totalBalance: 0
			},
			isVipUser: false,
			hasUnpaidOverdraft: false,
			hasRecentFrozen: false,
			isLoading: false,
			errorMsg: '',
			avatarError: false
		};
	},
	computed: {
		remainingOverdraft() {
			// VIP用户固定透支额度为1000元，计算剩余额度
			if (!this.isVipUser) {
				return 0;
			}
			const overdraftLimit = 1000; // VIP固定额度
			const balance = this.walletData.balance || 0;
			// 如果余额为负，说明已使用透支额度
			const usedOverdraft = balance < 0 ? Math.abs(balance) : 0;
			return Math.max(0, overdraftLimit - usedOverdraft);
		}
	},
	methods: {
		async loadWalletData() {
			this.isLoading = true;
			this.errorMsg = '';
			try {
				const token = localStorage.getItem('id_token');
				if (!token) {
					this.$router.push('/login');
					return;
				}

				// 获取钱包余额
				const response = await axios.get('wallet/balance', {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				});

				if (response.data.success && (response.data.code === 200 || response.data.code === 0)) {
					this.walletData = response.data.data;
					// 检查用户是否为VIP（优先使用isVip或vipUser字段，如果没有则检查权限）
					this.isVipUser = response.data.data.isVip || 
					                  response.data.data.vipUser || 
					                  response.data.data.user?.authorities?.some(auth => auth.name === 'VIP') || 
					                  false;
					// 暂时设置一些演示数据，后续根据实际业务逻辑调整
					this.hasUnpaidOverdraft = false; // 实际需要后端提供
					this.hasRecentFrozen = this.walletData.frozenBalance > 0;
				} else {
					this.errorMsg = response.data.message || '获取钱包信息失败';
				}
			} catch (error) {
				this.errorMsg = '网络错误，请重试';
			} finally {
				this.isLoading = false;
			}
		},
		goToRecharge() {
			this.$router.push('/walletRecharge');
		},
		goToWithdraw() {
			this.$router.push('/walletWithdraw');
		},
		goToTransactions() {
			this.$router.push('/walletTransactions');
		},
		async upgradeToVip() {
			if (this.isVipUser) {
				alert('您已经是VIP用户了！');
				return;
			}

			if (!confirm('确认免费升级为VIP用户吗？\n升级后将享受1000元透支额度。')) {
				return;
			}

			this.isLoading = true;
			this.errorMsg = '';
			try {
				const token = localStorage.getItem('id_token');
				if (!token) {
					this.$router.push('/login');
					return;
				}

				const response = await axios.post('wallet/upgrade-vip', null, {
					headers: {
						'Authorization': `Bearer ${token}`
					},
					timeout: 10000
				});

				if (response.data.success && (response.data.code === 200 || response.data.code === 0)) {
					const walletData = response.data.data;
					this.walletData = walletData;
					this.isVipUser = walletData.isVip || walletData.vipUser || false;
					alert('恭喜！您已成功升级为VIP用户，享受1000元透支额度！');
					// 刷新数据
					await this.loadWalletData();
				} else {
					const errorMsg = response.data.message || '升级失败';
					if (errorMsg.includes('已是VIP') || errorMsg.includes('已经是VIP')) {
						alert('您已经是VIP用户了！');
						await this.loadWalletData();
					} else {
						this.errorMsg = errorMsg;
					}
				}
			} catch (error) {
				if (error.response && error.response.data) {
					const errorMsg = error.response.data.message || '升级失败';
					if (error.response.status === 400 && (errorMsg.includes('已是VIP') || errorMsg.includes('已经是VIP'))) {
						alert('您已经是VIP用户了！');
						await this.loadWalletData();
					} else {
						this.errorMsg = errorMsg;
					}
				} else {
					this.errorMsg = '网络错误，请重试';
				}
			} finally {
				this.isLoading = false;
			}
		},
		handleAvatarError(event) {
			// 如果头像加载失败，使用默认头像
			this.avatarError = true;
			if (event.target) {
				event.target.style.display = 'none';
			}
		}
	},
	mounted() {
		this.loadWalletData();
	},
	activated() {
		// 当从其他页面返回时，自动刷新钱包数据
		this.loadWalletData();
	},
	watch: {
		// 监听路由变化，如果是从充值/提现页面返回，刷新数据
		'$route'(to, from) {
			if (from.path === '/walletRecharge' || from.path === '/walletWithdraw') {
				this.loadWalletData();
			}
		}
	}
};
</script>

<style scoped>
.wrapper {
	padding-bottom: 15vw;
	height: 100vh;
	overflow: hidden;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	background-attachment: fixed;
	display: flex;
	flex-direction: column;
}

header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	padding: 3vw 4vw;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

header::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.5;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

header p {
	margin: 0;
	font-size: 4vw;
	font-weight: 600;
	position: relative;
	z-index: 1;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 钱包信息 */
.wallet-info {
	background: #fff;
	margin: 2vw 3vw;
	border-radius: 2.5vw;
	padding: 0;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	transition: transform 0.3s, box-shadow 0.3s;
	flex-shrink: 0;
}

.wallet-info:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.balance-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 4vw 4vw;
	position: relative;
	overflow: hidden;
}

.balance-card::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 100%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
	animation: rotate 15s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.balance-header {
	display: flex;
	align-items: center;
	margin-bottom: 2.5vw;
	position: relative;
	z-index: 1;
}

.wallet-icon {
	width: 10vw;
	height: 10vw;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 2.5vw;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	position: relative;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.wallet-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.avatar-fallback {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
}

.avatar-fallback i {
	font-size: 6vw;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.balance-title {
	flex: 1;
}

.balance-title h3 {
	margin: 0 0 0.3vw 0;
	font-size: 3.5vw;
	color: #fff;
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.balance-subtitle {
	margin: 0;
	font-size: 2.2vw;
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.balance-amount-section {
	position: relative;
	z-index: 1;
}

.balance-amount {
	margin: 0;
	font-size: 7vw;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	letter-spacing: -1px;
}

.balance-details {
	background: #f8f9fa;
	padding: 2.5vw 3vw;
	border-top: 2px solid #e9ecef;
}

.detail-item {
	display: flex;
	align-items: center;
	padding: 2vw 2.5vw;
	margin-bottom: 1.5vw;
	background: #fff;
	border-radius: 1.5vw;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.detail-item:hover {
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detail-icon {
	width: 8vw;
	height: 8vw;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 2.5vw;
	flex-shrink: 0;
}

.detail-icon.frozen {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
}

.detail-icon.vip {
	background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
}

.detail-icon i {
	font-size: 5vw;
	color: #fff;
}

.detail-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5vw;
}

.detail-label {
	font-size: 3vw;
	color: #999;
}

.frozen-amount {
	color: #e74c3c;
	font-weight: bold;
	font-size: 4vw;
}

.overdraft-info {
	color: #27ae60;
	font-weight: bold;
	font-size: 4vw;
}

.overdraft-info small {
	font-size: 2.5vw;
	color: #7f8c8d;
	margin-left: 1vw;
	font-weight: normal;
}

/* 快捷提示 */
.quick-tips {
	margin: 0 3vw 2vw 3vw;
	flex-shrink: 0;
}

.tip-item {
	border-radius: 2vw;
	padding: 2.5vw 3vw;
	margin-bottom: 2vw;
	display: flex;
	align-items: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transition: all 0.3s;
}

.tip-item:last-child {
	margin-bottom: 0;
}

.tip-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.tip-item.warning {
	background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
	border: 2px solid #f39c12;
}

.tip-item.info {
	background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
	border: 2px solid #3b82f6;
}

.tip-icon {
	width: 8vw;
	height: 8vw;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 2.5vw;
	flex-shrink: 0;
}

.tip-item.warning .tip-icon {
	background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.tip-item.info .tip-icon {
	background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.tip-icon i {
	font-size: 5vw;
	color: #fff;
}

.tip-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1vw;
}

.tip-title {
	font-size: 3.5vw;
	font-weight: 600;
	color: #333;
}

.tip-item.warning .tip-title {
	color: #856404;
}

.tip-item.info .tip-title {
	color: #1e40af;
}

.tip-text {
	font-size: 3vw;
	color: #666;
	line-height: 1.5;
}

/* 功能入口 */
.function-entries {
	background: #fff;
	margin: 0 3vw 2vw 3vw;
	border-radius: 2.5vw;
	padding: 3vw;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5vw;
	flex: 1;
	overflow-y: auto;
}

.entry-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3vw 2vw;
	border-radius: 2vw;
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
	background: #f8f9fa;
	border: 2px solid transparent;
}

.entry-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	transition: opacity 0.3s;
}

.entry-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.entry-item:active {
	transform: translateY(-2px);
}

.entry-item.recharge {
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.entry-item.recharge:hover {
	border-color: #4caf50;
	box-shadow: 0 8px 24px rgba(76, 175, 80, 0.3);
}

.entry-item.withdraw {
	background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.entry-item.withdraw:hover {
	border-color: #ff9800;
	box-shadow: 0 8px 24px rgba(255, 152, 0, 0.3);
}

.entry-item.transactions {
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.entry-item.transactions:hover {
	border-color: #2196f3;
	box-shadow: 0 8px 24px rgba(33, 150, 243, 0.3);
}

.entry-icon {
	width: 11vw;
	height: 11vw;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 2vw;
	position: relative;
	z-index: 1;
	transition: all 0.3s;
}

.entry-item.recharge .entry-icon {
	background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
	box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
}

.entry-item.withdraw .entry-icon {
	background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
	box-shadow: 0 4px 16px rgba(255, 152, 0, 0.4);
}

.entry-item.transactions .entry-icon {
	background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
	box-shadow: 0 4px 16px rgba(33, 150, 243, 0.4);
}

.entry-item:hover .entry-icon {
	transform: scale(1.1) rotate(5deg);
}

.entry-icon i {
	font-size: 5.5vw;
	color: #fff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.entry-item span {
	font-size: 3.2vw;
	color: #333;
	text-align: center;
	font-weight: 600;
	position: relative;
	z-index: 1;
}

.entry-item.vip-only {
	background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
	border: 2px solid #fbc02d;
	position: relative;
}

.entry-item.vip-only:hover {
	border-color: #f9a825;
	box-shadow: 0 8px 24px rgba(249, 168, 37, 0.4);
}

.entry-item.vip-only .entry-icon {
	background: linear-gradient(135deg, #fbc02d 0%, #f9a825 100%);
	box-shadow: 0 4px 16px rgba(251, 192, 45, 0.4);
}

.entry-item.upgrade-vip {
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	border: 2px solid #4caf50;
	position: relative;
}

.entry-item.upgrade-vip:hover {
	border-color: #388e3c;
	box-shadow: 0 8px 24px rgba(76, 175, 80, 0.4);
}

.entry-item.upgrade-vip .entry-icon {
	background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
	box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
}

.vip-badge {
	position: absolute;
	top: 1vw;
	right: 1vw;
	background: linear-gradient(135deg, #fbc02d 0%, #f9a825 100%);
	color: #fff;
	font-size: 2.5vw;
	padding: 1vw 2vw;
	border-radius: 1vw;
	font-weight: bold;
	box-shadow: 0 2px 8px rgba(251, 192, 45, 0.4);
	z-index: 2;
}

.entry-item.upgrade-vip .vip-badge {
	background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
	box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

/* 加载状态 */
.loading {
	text-align: center;
	padding: 8vw;
	color: #fff;
	font-size: 4vw;
	position: relative;
}

.loading::before {
	content: '';
	display: inline-block;
	width: 8vw;
	height: 8vw;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top: 4px solid #fff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 2vw;
	vertical-align: middle;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 错误提示 */
.error-msg {
	background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
	margin: 4vw 3vw;
	border-radius: 2.5vw;
	padding: 4vw;
	text-align: center;
	box-shadow: 0 4px 16px rgba(231, 76, 60, 0.2);
	border: 2px solid #ffcdd2;
}

.error-msg p {
	margin: 0 0 3vw 0;
	color: #e74c3c;
	font-size: 3.5vw;
	font-weight: 500;
}

.error-msg button {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	border: none;
	border-radius: 2vw;
	padding: 3vw 6vw;
	font-size: 3.5vw;
	cursor: pointer;
	font-weight: 500;
	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
	transition: all 0.3s;
}

.error-msg button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.error-msg button:active {
	transform: translateY(0);
}
</style>
